<template>
  <div>
    <p>{{mainStore.count}}</p>
    <p>{{mainStore.foo}}</p>
    <p>{{mainStore.arr}}</p>
    <p>{{mainStore.pushArr}}</p>
    <p>{{mainStore.pushArr}}</p>
    <p>{{mainStore.pushArr}}</p>
    <hr>
    <p>{{count}}</p>
    <p>{{foo}}</p>

    <p><button @click="changeState">count+1</button></p>
  </div>
</template>
<script setup lang='ts'>
import { useMainStore } from "../store";
import { storeToRefs } from "pinia";

const mainStore=useMainStore()

// 注意：这样结构出来的数据不是响应式的
// let { count, foo } = mainStore
// 解决办法使用官方的API：storeToRefs
let {count,foo}=storeToRefs(mainStore)


const changeState = () => {
  // 方式一：修改单个数据,不建议每次更新会更新视图，消耗性能
  // mainStore.count++
  // 方式二：修改多个数据，使用$patch:对象
  // mainStore.$patch({
  //   count: mainStore.count++,
  //   foo:'newlky'
  // })
  // 方式三:$patch传递函数
  // mainStore.$patch(state => {
  //   state.count++;
  //   state.foo = "newlky"
  //   state.arr.push(4)
  //   })
  // 方式四：逻辑抽离到store中，直接调用方法就行了
  mainStore.changeState(10)

}
</script>
<style>
 
</style>
